﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>爱奇艺收视率分析</title>
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <style>
        #preForm {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f9f9f9;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            font-weight: bold;
        }

        input[type="text"],
        input[type="number"],
        select {
            width: 100%;
            padding: 10px;
            margin: 5px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

        input[type="submit"] {
            width: 100%;
            background-color: #4caf50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type="submit"]:hover {
            background-color: #45a049;
        }
    </style>
    <link rel="stylesheet" href="/static/css/comon0.css">
</head>
<script type="text/javascript">
    $(document).ready(function () {
        var html = $(".wrap ul").html()
        $(".wrap ul").append(html)
        var ls = $(".wrap li").length / 2 + 1
        i = 0
        ref = setInterval(function () {
            i++
            if (i == ls) {
                i = 1
                $(".wrap ul").css({marginTop: 0})
                $(".wrap ul").animate({marginTop: -'.52' * i + 'rem'}, 1000)
            }
            $(".wrap ul").animate({marginTop: -'.52' * i + 'rem'}, 1000)


        }, 2400);


        var html2 = $(".adduser ul").html()
        $(".adduser ul").append(html2)
        var ls2 = $(".adduser li").length / 2 + 1
        a = 0
        ref = setInterval(function () {
            a++
            if (a == ls2) {
                a = 1
                $(".adduser ul").css({marginTop: 0})
                $(".adduser ul").animate({marginTop: -'.5' * a + 'rem'}, 800)
            }
            $(".adduser ul").animate({marginTop: -'.5' * a + 'rem'}, 800)


        }, 4300);


    })
</script>
<body>
<div class="loading">
    <div class="loadbox"><img src="/static/images/loading.gif"> 页面加载中...</div>
</div>
<div class="head">
    <h1><img src="/static/images/map.png" style="width: 30px;height: 30px">大屏</h1>
</div>
<div class="mainbox">
    <ul class="clearfix">
        <li>
            <div class="boxall" style="height: 1.7rem">
                <div class="alltitle">语言分析</div>

                <div class="sycm">
                    <ul class="clearfix">
                        <li><h2>{{ gv }}</h2><span>港剧平均收视率</span></li>
                        <li><h2>{{ pv }}</h2><span>普通话平均收视率</span></li>
                        <li><h2>111</h2><span>本月增长比率</span></li>
                    </ul>
                    <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>


                </div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.4rem">
                <div class="alltitle">年份热度</div>
                <div class="sy" id="echarts1"></div>
                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.3rem">
                <div class="alltitle">月份热度</div>
                <div id="echarts4" style="height: 2.2rem; width: 100%;"></div>
                <div class="boxfoot"></div>
            </div>
        </li>
        <li>
            <div class="bar">
                <div class="barbox">
                    <ul class="clearfix">
                        <li class="pulll_left counter">{{ all }}</li>
                        <li class="pulll_left counter">{{ ceo }}</li>
                    </ul>
                </div>
                <div class="barbox2">
                    <ul class="clearfix">
                        <li class="pulll_left">电视剧总数</li>
                        <li class="pulll_left">电视据类别总数</li>
                    </ul>
                </div>
            </div>
            <div class="map">
                <form style="display: none" id="preForm" action="/predict" method="post" onsubmit="return false;">
                    <label for="tag">标签：</label><br>
                    <input type="text" id="tag" name="tag" value="都市;爱情;剧情;生活;当代;内地"><br>
                    <label for="creator">创建者：</label><br>
                    <input type="text" id="creator" name="creator" value="王 欢"><br>
                    <label for="contributor">贡献者：</label><br>
                    <input type="text" id="contributor" name="contributor" value="江疏影, 杨采钰, 张佳宁, 张慧雯, 李浩菲"><br>
                    <label for="title">标题：</label><br>
                    <input type="text" id="title" name="title" value="唐人街探案2"><br>
                    <label for="year">年份：</label><br>
                    <input type="number" id="year" name="year" value="2024"><br>
                    <label for="month">月份：</label><br>
                    <input type="number" id="month" name="month" value="3"><br>
                    <label for="bossStatus">Boss 状态：</label><br>
                    <select id="bossStatus" name="bossStatus">
                        <option value="FREE">FREE</option>
                        <option value="PAIED_AVAILABLE">VIP</option>
                    </select><br>
                    <label for="hot_score">热度评分：</label><br>
                    <input type="number" id="hot_score" name="hot_score" value="6008"><br><br>
                    <input type="submit" onclick="predict()" value="提交">
                </form>
                <div class="map1" id="m1"><img src="/static/images/lbx.png"></div>
                <div class="map2" id="m2"><img src="/static/images/jt.png"></div>
                <div class="map3" id="m3" onclick="document.getElementById('preForm').style.display='block'"><img src="/static/images/map.png"></div>


            </div>
            <script>
                function predict() {
                    var formData = $('#preForm').serialize();
                    $.ajax({
                        type: 'POST',
                        url: '/predict',
                        data: formData,
                        success: function (response) {
                            // 处理成功响应
                            console.log(response)
                            prediction = response.prediction;
                            var ech_pre = echarts.init(document.getElementById('echarts-pre'));
                            optione = {
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross',
                                        label: {
                                            backgroundColor: '#6a7985'
                                        }
                                    }
                                },
                                xAxis: {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: prediction[0],
                                    axisLabel: {
                                        color: 'blue' // 设置 y 轴字体颜色为蓝色
                                    }
                                },
                                yAxis: {
                                    type: 'value',
                                    axisLabel: {
                                        color: 'blue' // 设置 y 轴字体颜色为蓝色
                                    }
                                },
                                series: [
                                    {
                                        data: prediction[1],
                                        type: 'line',
                                        emphasis: {
                                            focus: 'series'
                                        },
                                    }
                                ]
                            };

                            setTimeout(function () {
                                ech_pre.setOption(optione);

                            }, 500);


                        },
                        error: function (xhr, status, error) {
                            // 处理错误响应
                            console.error('Request failed. Status:', status);
                        }
                    });
                }

            </script>
        </li>
        <li>
            <div class="boxall" style="height:5.2rem">
                <div class="alltitle">演员收视率推荐</div>
                <div class="tabs">

                </div>
                <div class="clearfix">
                    <div id="echarts6" style="width: 110%; height: 5rem; "></div>

                </div>

                <div class="boxfoot"></div>
            </div>
            <div class="boxall" style="height: 3.4rem;width: 110%">
                <div class="alltitle" onclick="showPre()">收视率预测</div>
                <div id="echarts-pre" class="wrap">
                </div>
                <div class="boxfoot"></div>
            </div>

            <script>
                function showPre(){
                    var form = document.getElementById('preForm');
                    var m1 = document.getElementById('m1');
                    var m2 = document.getElementById('m2');
                    var m3 = document.getElementById('m3');
                    form.style.display = 'block'
                    m1.style.display = 'none'
                    m2.style.display = 'none'
                    m3.style.display = 'none'

                }

            </script>
        </li>
    </ul>

</div>
<div class="back"></div>
<script language="JavaScript" src="/static/js/js.js"></script>
<script type="text/javascript" src="/static/js/echarts.min.js"></script>
<script type="text/javascript" src="/static/js/china.js"></script>
<script type="text/javascript" src="/static/js/area_echarts.js"></script>
<script type="text/javascript">
    var myChart6 = echarts.init(document.getElementById('echarts6'));
    $(document).ready(function () {
        myChart1.resize();
        myChart6.resize();

    })
    window.addEventListener("resize", function () {
        myChart1.resize();
        myChart6.resize();

    });
</script>
<script type="text/javascript">


    var myChart6 = echarts.init(document.getElementById('echarts6'));
    option6 = {
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: {{ contributor_key|tojson }},
            axisLabel: {
                color: 'blue' // 设置 y 轴字体颜色为蓝色
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: 'blue' // 设置 y 轴字体颜色为蓝色
            }
        },
        series: [
            {
                data: {{ contributor_value }},
                type: 'line',
                areaStyle: {}
            }
        ]
    };

    setTimeout(function () {
        myChart6.setOption(option6);

    }, 500);


</script>
<script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('echarts1'));
    option1 = {
        title: {
            text: '年份热度',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 10,
            top: 20,
            bottom: 20,
            data: {{ year_key }},
            textStyle: {
                color: 'red'
            }
        },
        series: [
            {
                name: '年份',
                type: 'pie',
                radius: '55%',
                center: ['40%', '50%'],
                data: {{ years|tojson }},
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    setTimeout(function () {
        myChart1.setOption(option1);
    }, 500);

</script>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('echarts4'));
    var plantCap = {{months|tojson}};
    var datalist = [{
        offset: [56, 48],
        symbolSize: 110,
        color: 'rgba(73,188,247,.14)',
    }, {
        offset: [30, 70],
        symbolSize: 70,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [0, 43],
        symbolSize: 60,
        color: 'rgba(73,188,247,.14)'

    }, {
        offset: [93, 30],
        symbolSize: 70,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [26, 19],
        symbolSize: 65,
        color: 'rgba(73,188,247,.14)'
    }, {
        offset: [75, 75],
        symbolSize: 60,
        color: 'rgba(73,188,247,.14)'
    },
        {
            offset: [90, 23],
            symbolSize: 110,
            color: 'rgba(73,188,247,.14)',
        }, {
            offset: [3, 70],
            symbolSize: 70,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [0, 23],
            symbolSize: 60,
            color: 'rgba(73,188,247,.14)'

        }, {
            offset: [43, 30],
            symbolSize: 70,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [66, 19],
            symbolSize: 65,
            color: 'rgba(73,188,247,.14)'
        }, {
            offset: [95, 75],
            symbolSize: 60,
            color: 'rgba(73,188,247,.14)'
        }
    ];

    var datas = [];
    for (var i = 0; i < plantCap.length; i++) {
        var item = plantCap[i];
        var itemToStyle = datalist[i];
        datas.push({
            name: item.value + '\n' + item.name,
            value: itemToStyle.offset,
            symbolSize: itemToStyle.symbolSize,
            label: {
                normal: {
                    textStyle: {
                        fontSize: 14
                    }
                }
            },

            itemStyle: {
                normal: {
                    color: itemToStyle.color,
                    opacity: itemToStyle.opacity
                }
            },
        })
    }
    option = {
        grid: {
            show: false,
            top: 10,
            bottom: 10
        },

        xAxis: [{
            gridIndex: 0,
            type: 'value',
            show: false,
            min: 0,
            max: 100,
            nameLocation: 'middle',
            nameGap: 5
        }],

        yAxis: [{
            gridIndex: 0,
            min: 0,
            show: false,
            max: 100,
            nameLocation: 'middle',
            nameGap: 30
        }],
        series: [{
            type: 'scatter',
            symbol: 'circle',
            symbolSize: 120,
            label: {
                normal: {
                    show: true,
                    formatter: '{b}',
                    color: '#FFF',
                    textStyle: {
                        fontSize: '30'
                    }
                },
            },
            itemStyle: {
                normal: {
                    color: '#F30'
                }
            },
            data: datas
        }]

    };
    myChart.setOption(option);
    $(document).ready(function () {
        myChart.resize();

    })
    window.addEventListener("resize", function () {
        myChart.resize();
    });
</script>
<script type="text/javascript" src="/static/js/jquery.waypoints.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.countup.min.js"></script>
<script type="text/javascript">
    $('.counter').countUp();
</script>

</body>
</html>
